<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JQueryEasyUI测试一</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"></link>
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" />
		<!--引入ztree-->
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
		<script type="text/javascript">
			//页面加载
			$(function() {
				//ztree
				//使用ztree,进行核实设置
				var setting = {
					data: {
						simpleData: {
							enable: true //允许简单的json格式
						}
					},
					callback: {
						onClick: function(event, treeId, treeNode, clickFlag) {
							var con = '<div style="width:100%;height:100%;overflow:hidden;"><iframe src="' + treeNode.page + '" scrolling="auto" style="width:100%;height:100%;border:0"></iframe></div>';
							//将ztree和选项卡关联
							if(treeNode.page != undefined && treeNode.page != "") {
								//如果存在该名称的选项卡
								if($("#tt").tabs('exists', treeNode.name)) {
									//那就是选中
									$("#tt").tabs('select', treeNode.name)
								} else {
									//如果不存在,name就增加选项卡
									$("#tt").tabs('add', {
										title: treeNode.name,
										content: con,
										closable: true
									});

								}
							}
						}
					}
				};
				//树形菜单
				var zNotes = [{
						id: 1,
						pId: 0,
						name: "父节点一"
					},
					{
						id: 2,
						pId: 0,
						name: "父节点二"
					},
					{
						id: 11,
						pId: 1,
						name: "百度",
						page: "http://www.baidu.com"
					},
					{
						id: 12,
						pId: 1,
						name: "一节点的子节点二"
					},
					{
						id: 21,
						pId: 2,
						name: "github",
						page: "http://www.github.com"
					},
					{
						id: 22,
						pId: 2,
						name: "二节点的子节点二"
					},
				];
				//生成树形菜单
				$.fn.zTree.init($("#baseMenu"), setting, zNotes);
				
				//选项卡右键菜单
				$("#tt").tabs({
					onContextMenu: function(e, title, index) {
						//阻止默认菜单
						e.preventDefault();
						//显示自定义菜单
						$("#mm").menu('show', {
							left: e.pageX,
							top: e.pageY
						});
					}

				});
				//获取选中的选项卡
				var pp = $('#tt').tabs('getSelected');
				
			});
		</script>
	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',title:'个人管理系统'" style="height: 100px;">
			<!--下拉菜单-->
			<a href="javascript:void(0)" id="md" class="easyui-menubutton" data-options="menu:'#m1',iconCls:'icon-edit'" >选项</a>
			<div id="m1" style="width: 75px;">
				<div data-options="iconCls:'icon-undo'">选项一</div>
				<div id="xxtow">选项二</div>
				<div class="menu-sep"></div>
				<div>选项三</div>
			</div>
		</div>
		<div data-options="region:'west',title:'菜单栏'" style="width: 200px;">
			<!-- 菜单栏 -->
			<div class="easyui-accordion" data-options="fit:true">
				<div data-options="title:'基本功能'">
					<!--
                    	作者：me281026@163.com
                    	时间：2017-07-20
                    	描述：树形菜单
                    -->
					<ul class="ztree" id="baseMenu"></ul>
				</div>
				<div data-options="title:'系统管理'"></div>
			</div>
		</div>
		<div data-options="region:'center'">
			<div id="tt" class="easyui-tabs" data-options="fit:true">
				
			</div>

		</div>
		<div data-options="region:'east'" style="width: 100px;">右部</div>
		<div data-options="region:'south'" style="height: 100px;">下部</div>

		<!--
        	作者：me281026@163.com
        	时间：2017-07-21
        	描述：选项卡菜单
        -->
		<div class="easyui-menu" style="width: 100px;" id="mm">
			<div>关闭当前窗口</div>
			<div>关闭其它窗口</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel'">关闭所有</div>
		</div>


	<script type="text/javascript">
		//添加警告框
		$("#xxtow").click(function() {
			$.messager.alert('警告','该选项有问题'); 
		});
		//添加确认框
		$.messager.confirm('确认','你真的喜欢她吗?',function(r){ 
			//r是选择,也就是true或false
			if (r){ 
				alert('好的,她归我了'); 
			} else {
				alert('活该');
			}
		});
		//输入窗口
		$.messager.prompt("调查","你喜欢什么类型的妹子,请回答?",function(d) {
			if(d) {
				alert("你喜欢的"+d+"类型的妹子都没有了.....");
			}else {
				alert("呵呵......");
			}
			
		});
		//进度条
		$.messager.progress(
			{
				interval : 1000,
				title : "加载进度",
				msg : "加载中.....",
			}
		);
		//设置自动关闭进度条时间
		window.setTimeout("$.messager.progress('close');",5000);
		
		//右下角窗口
		$.messager.show({
			title:'欢迎回来',  	
  			msg:'感谢您再次登录本网站...',  	
  			timeout:5000,  	
  			showType:'slide'  
		});
	</script>
	</body>

</html>